Buefy is a UI framework that’s based on Bulma.
In this article, we’ll look at how to use Buefy in our Vue app.
Switch
Buefy provides a switch component for us to use.
For example, we can write:
<template>
<section>
<div class="field">
<b-switch>Default</b-switch>
</div>
</section>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
We can bind the value withv-model :
<template>
<section>
<div class="field">
<b-switch v-model="isSwitched">{{ isSwitched }}</b-switch>
</div>
</section>
</template>
<script>
export default {
data() {
return { isSwitched: false };
}
};
</script>
the type prop lets us change the style:
<template>
<section>
<div class="field">
<b-switch v-model="isSwitched" type="is-success">{{ isSwitched }}</b-switch>
</div>
</section>
</template>
<script>
export default {
data() {
return { isSwitched: false };
}
};
</script>
The size prop changes the size:
<template>
<section>
<div class="field">
<b-switch v-model="isSwitched" size="is-large">{{ isSwitched }}</b-switch>
</div>
</section>
</template>
<script>
export default {
data() {
return { isSwitched: false };
}
};
</script>
Also, we can set the rounded prop to false to make it square:
<template>
<section>
<div class="field">
<b-switch v-model="isSwitched" :rounded="false">{{ isSwitched }}</b-switch>
</div>
</section>
</template>
<script>
export default {
data() {
return { isSwitched: false };
}
};
</script>
The outlined prop makes it outlined:
<template>
<section>
<div class="field">
<b-switch v-model="isSwitched" outlined>{{ isSwitched }}</b-switch>
</div>
</section>
</template>
<script>
export default {
data() {
return { isSwitched: false };
}
};
</script>
Tag Input
We can add tag input with the b-taginput component.
For example, we can write:
<template>
<section>
<div class="field">
<b-taginput v-model="tags" ellipsis placeholder="Add a tag"></b-taginput>
{{tags}}
</div>
</section>
</template>
<script>
export default {
data() {
return { tags: [] };
}
};
</script>
We bind the entered tags to an array of strings with v-model .
ellipsis truncates long tag text and adds an ellipsis after it.
Autocomplete
We can add the autocomplete prop to add the autocomplete values:
<template>
<section>
<div class="field">
<b-taginput v-model="tags" :data="filteredTags" autocomplete placeholder="Add a tag"></b-taginput>
{{tags}}
</div>
</section>
</template>
<script>
export default {
data() {
return { tags: [], filteredTags: ["foo", "bar", "baz"] };
}
};
</script>
data has an array of strings with the choices we can choose from.
autocomplete enables the autocomplete dropdown.
Templated Autocomplete
We can populate the default slot to change the template for the autocomplete control:
<template>
<section>
<div class="field">
<b-taginput v-model="tags" :data="filteredTags" autocomplete placeholder="Add a tag">
<template slot-scope="props">
<strong>{{props.option}}</strong>
</template>
<template slot="empty">There are no items</template>
</b-taginput>
{{tags}}
</div>
</section>
</template>
<script>
export default {
data() {
return { tags: [], filteredTags: ["foo", "bar", "baz"] };
}
};
</script>
props.option has the item that we can select.
Customize Selected Item
We can customize the selected item by populating the selected slot:
<template>
<section>
<div class="field">
<b-taginput
ref="tagInput"
v-model="tags"
:data="filteredTags"
autocomplete
placeholder="Add a tag"
>
<template slot="selected" slot-scope="props">
<b-tag
v-for="(tag, index) in props.tags"
:key="index"
type="is-success"
rounded
:tabstop="false"
ellipsis
closable
@close="$refs.tagInput.removeTag(index, $event)"
>{{tag}}</b-tag>
</template>
</b-taginput>
{{tags}}
</div>
</section>
</template>
<script>
export default {
data() {
return { tags: [], filteredTags: ["foo", "bar", "baz"] };
}
};
</script>
We set the type to change the style.
is-success makes the tags green.
closable shows the close button so we can remove it.
The b-tag emits the close event so we can remove the entry when we click the close button.
Conclusion
We can add switches and tag inputs with Buefy.
